<template>
	<view>
		<view class="head">
			<view class="head-top">
				<view class="title">选择Tag</view>
				<uni-easyinput v-model="goodStr" disabled type="textarea" maxlength="200" placeholder="请选择" />
			</view>
			<view class="btn">
				<view class="submit" @click="copy">点击复制</view>
			</view>
		</view>
		<tab :lists="lists" :tab_color="tab_color" @switchover="switchover"></tab>
		<view class="tag-box">
			<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="tagList"></uni-data-checkbox>
		</view>
	</view>
</template>

<script>
	import tab from '../../components/tab/Tab.vue';
	import tag from '../../static/tags.json'
	export default {
		components: {
			tab
		},
		data() {
			return {
				index: 0,
				goodStr: '',
				lists: [{
						id: 1,
						name: '环境'
					},
					{
						id: 2,
						name: '风格'
					},
					{
						id: 3,
						name: '人物'
					},
					{
						id: 4,
						name: '头发'
					},
					{
						id: 5,
						name: '五官'
					},
					{
						id: 6,
						name: '服装'
					},
					{
						id: 7,
						name: '鞋袜'
					},
					{
						id: 8,
						name: '动作'
					}
				],
				tagList: [],
				pick: [],
				allCheck: [
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
				],
				checkbox: [],
			}
		},
		computed: {},
		watch: {
			checkbox: {
				handler(val) {
					let i = this.index
					this.allCheck[i] = val
					let list = []
					let allList = this.allCheck
					allList.forEach(e => {
						list = list.concat(e)
					})
					let str = list.join(',')
					this.goodStr = str
				},
				deep: true
			}
		},
		methods: {
			copy() {
				let tagStr = this.goodStr
				if (!this.goodStr) {
					uni.showToast({
						icon: 'none',
						title: '请选择Tag'
					})
					return
				}
				uni.setClipboardData({
					data: this.goodStr,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功，2s后返回，自动填充'
						})
						uni.setStorageSync('tagStr', tagStr)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 2000)
					}
				});
			},
			switchover(id) {
				this.tagList = []
				this.checkbox = this.allCheck[id - 1]
				this.index = id - 1
				this.tagList = tag.data[id - 1]
			},
		},
		onLoad(options) {
			console.log(tag)
			this.tagList = tag.data[0]
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #fff;
	}

	.head-top {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		padding-right: 30rpx;

		/deep/ textarea {
			color: #000 !important;
		}

		.title {
			width: 160rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}

	}

	.btn {
		height: 120rpx;

		.submit {
			margin: 20rpx auto;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(#00AEEC, #1296db);
			color: #fff;
			border-radius: 20rpx;
		}
	}

	.tag-box {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;
		margin-top: 30rpx;

		.item {
			padding: 8rpx;
			margin: 4rpx;
			font-size: 28rpx;
			background-color: #fff;
			border: 1rpx solid #ccc;
			text-align: center;
		}

		.itema {
			color: #fff;
			background: linear-gradient(#00AEEC, #1296db);
		}
	}
</style>
